<template>
  <div id="comment-box">
    <div class="u-title">
      <h3 class="c-title">
        <span class="plun">评论</span>

      </h3>
      <p >
        <span>共</span> <span>{{searchParams.total}}</span><span>条评论</span>
      </p>
    </div>
    <div class="m-cmmt">

      <div class="iptarea">
        <div class="head">
          <img src="http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50" alt="">
        </div>
        <div class="j-flag">
          <div class="u-txtwrap">
            <textarea></textarea>
          </div>
          <div class="btns">
            <div class="biaoqing">
              <i class="face"></i>
              <i class="aite"></i>
            </div>

            <div class="pinlun">
              <span>140</span>
              <a href="#" class="plun">评论</a>
            </div>
          </div>
          <div class="corr"></div>
        </div>

      </div>
      <div class="cmmts">
        <h3 class="u-hd4">精彩评论</h3>
        <div class="itm" v-for="(item,index) in hotlist" :key="item.commentId">
          <div class="head-title">
            <router-link :to="{name:'UserDetailView',params:{id:item.user.userId,type:1}}">
              <img v-lazy="item.user.avatarUrl" alt="">
            </router-link>
          </div>
          <div class="cntwrap">
            <div class="context" >
              <router-link :to="{name:'UserDetailView',params:{id:item.user.userId,type:1}}" >{{item.user.nickname}}</router-link>
              <img
                  v-if="item.user.avatarDetail"
                  v-lazy="item.user.avatarDetail.identityIconUrl"
                  alt="">
              ：<span v-html="item.content"></span>
              <div class="que" v-if="item.beReplied">
                <router-link :to="{name:'UserDetailView',params:{id:item.beReplied[0].user.userId,type:1}}" class="fc" v-if="item.beReplied[0]">{{item.beReplied[0].user.nickname}}</router-link>
                <span v-if="item.beReplied[0]">：{{item.beReplied[0].content}}</span>
              </div>
            </div>
            <div class="rp">
              <div class="time">{{formatDate(item.time)}}</div>
              <div>
                <a href="#">
                  <i class="nice"></i> ({{item.likedCount}})
                </a>
                <span class="line">|</span>
                <a href="#">回复</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="cmmts">
        <h3 class="u-hd4">最新评论</h3>
        <div class="itm" v-for="(item,index) in comList" :key="item.commentId">
          <div class="head-title">
            <router-link :to="{name:'UserDetailView',params:{id:item.user.userId,type:1}}">
              <img v-lazy="item.user.avatarUrl" alt="">
            </router-link>
          </div>
          <div class="cntwrap">
            <div class="context">
              <router-link :to="{name:'UserDetailView',params:{id:item.user.userId,type:1}}">{{item.user.nickname}}</router-link>
              <img
                  v-if="item.user.avatarDetail"
                  v-lazy="item.user.avatarDetail.identityIconUrl"
                  alt="">
              ：{{item.content}}
              <div class="que" v-if="item.beReplied[0]">
                <router-link :to="{name:'UserDetailView',params:{id:item.beReplied[0].user.userId,type:1}}" class="fc" v-if="item.beReplied[0]">{{item.beReplied[0].user.nickname}}</router-link>
                <span v-if="item.beReplied[0]">：{{item.beReplied[0].content}}</span>
              </div>
              </div>
            <div class="rp">
              <div class="time">{{formatDate(item.time)}}</div>
              <div>
                <a href="#">
                  <i class="nice"></i> ({{item.likedCount}})
                </a>
                <span class="line">|</span>
                <a href="#">回复</a>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
    <div style="height: 20px;"></div>
    <Pagination :pageNo='searchParams.pageNo' :pageSize='searchParams.pageSize' :total='searchParams.total'
                :continues='5' @getPageNo="getPageNo"></Pagination>
    <div style="height: 40px;"></div>

  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
import {formatDate} from "@/utils/formatDate";

export default {
  name: "index",
  props: ['commentId'],
  data() {
    return {
      formatDate:formatDate,
      // 评论详情
      comList: [],
      hotlist:[],
      // 分页器参数
      searchParams: {
        total: '',
        pageSize: 30,
        pageNo: 1,
      },
      //评论
      text: '',
    }
  },
  components: {
    Pagination
  },
  created() {
    this.getComment()
    this.getCommentHot()
  },
  methods:{
    async getComment(){
      if (!isNaN(parseInt(this.commentId)) && isFinite(this.commentId)){
        let result = await this.$API.reqMvComment(this.commentId,this.searchParams.pageSize,(this.searchParams.pageNo-1)*(this.searchParams.pageSize));

        this.searchParams.total = result.data.total;
        this.comList = result.data.comments;
      }else {
        let result = await this.$API.reqVideoComment(this.commentId,this.searchParams.pageSize,(this.searchParams.pageNo-1)*(this.searchParams.pageSize));
        this.searchParams.total = result.data.total;
        this.comList = result.data.comments;
      }

    },
    async getCommentHot(){
      if (!isNaN(parseInt(this.commentId)) && isFinite(this.commentId)){
        let result = await this.$API.reqNewCommentHot(this.commentId,1);
        this.hotlist = result.data.data.comments;
        this.hotlist.forEach(item=>{
          item.content = item.content.replace(/\n/g,'<br>');
        });
      }else {
        let result = await this.$API.reqNewCommentHot(this.commentId,5);
        this.hotlist = result.data.data.comments;
        this.hotlist.forEach(item=>{
          item.content = item.content.replace(/\n/g,'<br>');
        });
      }

    },
    getPageNo(pageNo) {
      this.searchParams.pageNo = pageNo;
      this.getComment();
    },
  }
}
</script>

<style scoped lang="less">
#comment-box {
  margin: 0 auto;
  width: 640px;
  height: auto;
  overflow: hidden;

  .u-title {
    width: 100%;
    height: 35px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #C20C0C;

    p {
      float: left;
      font-size: 12px;
      margin-top: 4px;
    }

    .c-title {
      font-weight: normal;
      margin-right: 20px;

      .plun {
        float: left;
        font-size: 20px;
        line-height: 28px;
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;

      }
    }
  }

  .m-cmmt {
    width: 640px;
    height: auto;
    margin-top: 20px;
    overflow: hidden;

    .iptarea {
      width: 640px;
      height: 98px;

      .head {
        float: left;
        width: 50px;
        height: 50px;

        img {
          width: 50px;
          height: 50px;
        }
      }

      .j-flag {
        float: left;
        width: 578px;
        height: 98px;

        .u-txtwrap {
          width: 578px;
          height: 63px;

          textarea {
            width: 569px;
            height: 63px;
            margin-left: 15px;
          }
        }

        .btns {
          width: 578px;
          height: 35px;
          margin-top: 10px;
          margin-left: 22px;
          display: flex;
          line-height: 35px;
          align-items: center;

          .biaoqing {
            float: left;
            margin-left: -8px;
            overflow: hidden;
            width: 100%;

            .face {
              margin-right: 10px;
              background: url("../../../assets/icon.png") no-repeat -40px -490px;
            }

            .aite {
              background: url("../../../assets/icon.png") no-repeat -60px -490px;

            }

            i {
              width: 18px;
              height: 18px;
              display: inline-block;
              float: left;
            }
          }

          .pinlun {
            float: right;
            display: flex;
            margin-left: -80px;
            align-items: center;

            span {
              float: left;
              color: #999;
            }
          }

          .plun {
            width: 46px;
            height: 25px;
            margin-left: 10px;
            background-position: -84px -64px;
            color: #fff;
            text-align: center;
            line-height: 25px;
            background-image: url("../../../assets/button.png");
            float: right;
          }


        }

        .corr {
          width: 13px;
          height: 14px;
          position: absolute;
        }
      }
    }

    .cmmts {
      width: 640px;
      height: auto;
      overflow: hidden;

      h3 {
        width: 640px;
        height: 21px;
        margin-top: 30px;
      }

      .itm {
        padding: 15px 0;
        border-top: 1px dotted #ccc;

        .head-title {
          float: left;
          width: 50px;
          height: 50px;

          a {
            width: 50px;
            height: 50px;
            display: inline-block;

            img {
              width: 50px;
              height: 50px;
            }
          }
        }

        .cntwrap {
          width: 580px;
          margin-left: 60px;

          .context {
            width: 580px;
            overflow: hidden;
            line-height: 20px;
            word-break: break-word;
            .que{
              padding: 8px 19px;
              margin-top: 10px;
              line-height: 20px;
              background: #f4f4f4;
              border: 1px solid #dedede;

              a{
                color: #0c73c2;
                &:hover{
                  cursor: pointer;
                  text-decoration: underline;
                }
              }
            }

            a {
              color: #0c73c2;
              margin-right: 5px;
            }

            img {
              width: 13px;
              height: 13px;
              margin-right: 5px;
              vertical-align: -2px;
            }
          }

          .rp {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;

            .time {
              color: #999;
            }

            .line {
              margin: 0 8px;
              color: #ccc;
            }

            a {
              color: #333;

              .nice {
                width: 15px;
                height: 14px;

                vertical-align: -2px;
                display: inline-block;
                background-image: url("../../../assets/icon2.png");
                background-position: -150px 0;
              }
            }
          }
        }
      }
    }

  }
}
</style>